<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div style="width: 100%;padding: 2px 0">
			<div style="float: left">
				<span style="font-size: 13px">查询</span>
				<el-select size="small" v-model="searchBookType" placeholder="请选择查询方式" style="width: 100px;margin-right: 2px">
					<el-option label="书名" :value="1"></el-option>
					<el-option label="条码" :value="2"></el-option>
					<el-option label="标签" :value="3"></el-option>
				</el-select>
				<el-input v-model="searchBookModel" size="small" style="width: 200px;">
					<el-button slot="append" icon="search" @click="searchBook"></el-button>
				</el-input>
			</div>
			<div class="block" style="text-align:right;float: right">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
			<el-table-column type="selection" align="center"></el-table-column>
			<el-table-column label="书名" align="center" prop="Name"></el-table-column>
			<el-table-column label="作者" align="center" prop="Author"></el-table-column>
			<el-table-column label="条码" align="center" prop="BookBarcode"></el-table-column>
			<el-table-column label="标签" align="center" prop="RFIDTag"></el-table-column>
			<el-table-column label="上架时间" align="center" prop="BindTime"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-tag type="danger" v-if="scope.row.Status === 1">丢失</el-tag>
					<el-tag type="warning" v-if="scope.row.Status === 2">外借</el-tag>
					<el-tag type="success" v-if="scope.row.Status === 3">在库</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align: right; margin-bottom: 100px;padding-top: 2px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!-- 所有未绑定图书列表 -->
		<el-dialog title="添加图书" v-model="addBookDialog" :class="[dialog-large-width]">
			<div style="padding: 3px 0;">
				<span style="font-size: 13px">查询</span>
				<el-select size="small" v-model="searchUnBookType" placeholder="请选择查询方式" style="width: 100px;margin-right: 2px">
					<el-option label="书名" :value="1"></el-option>
					<el-option label="条码" :value="2"></el-option>
					<el-option label="标签" :value="3"></el-option>
				</el-select>
				<el-input v-model="searchUnBookModel" size="small" style="width: 200px;">
					<el-button slot="append" icon="search" @click="searchUnBindBook"></el-button>
				</el-input>
			</div>
			<el-table border style="width: 100%;" @selection-change="handleUnBindBookSelectionChange" :data="unBindBookData">
				<el-table-column type="selection" align="center" width="50px"></el-table-column>
				<el-table-column label="书名" align="center" prop="Name"></el-table-column>
				<el-table-column label="作者" align="center" prop="Author"></el-table-column>
				<el-table-column label="条码" align="center" prop="BookBarcode"></el-table-column>
				<el-table-column label="标签" align="center" prop="RFIDTag"></el-table-column>
				<el-table-column label="绑定时间" align="center" prop="BindTime"></el-table-column>
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.Status === 1">丢失</el-tag>
						<el-tag type="warning" v-if="scope.row.Status === 2">外借</el-tag>
						<el-tag type="success" v-if="scope.row.Status === 3">在库</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<div class="block" style="text-align:right;padding-top: 3px;padding-bottom: 10px;">
					<el-pagination @size-change="handleUnBindBookSizeChange" @current-change="handleUnBindBookCurrentChange" :current-page="unBindBookCurrentPage" :page-size="unBindBookPageSize" :page-sizes="[10,20,30,40,50,70,100]" layout="total,sizes, prev, pager, next, jumper" :total="unBindBookTotalSize">
					</el-pagination>
				</div>
				<el-button @click="addBookDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmBindBook">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				//添加图书
				addBookDialog: false,
				unBindBookCurrentPage: 1,
				unBindBookPageSize: 10,
				unBindBookTotalSize:0 ,
				searchUnBookType: 1,
				searchUnBookModel: '',
				unBindBookData: [],
				multipleUnBindBookSelection: [],


				isReload: false,
				loading: false,
				tableData: [],
				searchBookType: 1,
				searchBookModel: '',
				multipleSelection: [],
				opreateDatas: [{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
				// {
				// 	type: 'primary',
				// 	size: 'small',
				// 	icon: "el-icon-eleg-icon_table el-icon--left",
				// 	name: "导出表格",
				// 	action: "exportExcel"
				// },
				{
					size: "small",
					type: 'primary',
					icon: 'el-icon-plus el-icon--left',
					name: '添加',
					action: 'addBook'
				},
				{
					size: "small",
					type: 'danger',
					icon: 'el-icon-delete2 el-icon--left',
					name: '删除',
					action: 'deleteBook'
				}
				],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
			}

		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//导出表格
			exportExcel() {　　　　　　
				require.ensure([], () => {　　　　　　　　
					const {
						export_json_to_excel
					} = require('../../../../assets/js/vendor/Export2Excel.js');　　　　　　　　
					const tHeader = ['书名', '类型', '条码', '标签', '作者', '出版社', '上架时间', '备注(1:丢失;2:外借;3:在库)'];　　　　　　　　
					const filterVal = ['Name', 'Type', 'BookBarcode', 'RFIDTag', 'Author',
					'Press', 'BindTime', 'Status'
					];　　　　　　　　
					const list = this.tableData;　　　　　　　　
					const data = this.formatJson(filterVal, list);　　　　　　　
					export_json_to_excel(tHeader, data, this.templateObj.tag + '书籍信息');　　　　　　
				})　　　
			},
			formatJson(filterVal, jsonData) {　　　　　　
				return jsonData.map(v => filterVal.map(j => v[j]))　　
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			searchBook() {
				this.getDatas();
			},
			//去掉时间中的T
			formatData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BindTime.indexOf("T");
					array[i].BindTime = array[i].BindTime.substring(0, index1) + " " + array[i].BindTime.substring(index1 + 1, index1 + 9);
				}
			},
			/**
			* 添加与删除图书
			**/
			addBook() {
				this.unBindBookCurrentPage = 1;
				this.unBindBookPageSize = 10;
				this.addBookDialog = true;
				this.getUnBindBookInfo();
			},
			handleUnBindBookCurrentChange(val) {
				this.unBindBookCurrentPage = val;
				this.getUnBindBookInfo();
			},
			handleUnBindBookSizeChange(val) {
				this.unBindBookPageSize = val;
				this.getUnBindBookInfo();
			},
			searchUnBindBook() {
				this.getUnBindBookInfo();
			},
			formateUnBindBookData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BindTime.indexOf("T");
					array[i].BindTime = array[i].BindTime.substring(0, index1) + " " + array[i].BindTime.substring(index1 + 1, index1 + 9);
				}
			},
			getUnBindBookInfo() {
				var param = {
					barcode: this.searchUnBookType === 2 ? this.searchUnBookModel : '',
					tag: this.searchUnBookType === 3 ? this.searchUnBookModel : '',
					keyword: this.searchUnBookType === 1 ? this.searchUnBookModel : '',
					index: this.unBindBookCurrentPage,
					pagesize: this.unBindBookPageSize,
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this, '/Api/Book/NoBindDistrict',param, function(response) {}, function(response) {
					// console.log('未绑定图书信息',response)
					if(response.data.code === 0) {
						this.formateUnBindBookData(response.data.bookinfo);
						this.unBindBookData = response.data.bookinfo;
						this.unBindBookTotalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			handleUnBindBookSelectionChange(val) {
				this.multipleUnBindBookSelection = val;
			},
			formateUnBindBookSelection() {
				var result = [],
				array = this.multipleUnBindBookSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].BookId);
				}
				return result;
			},
			confirmBindBook(){
				if(this.formateUnBindBookSelection().length > 0) {
					this.$confirm('此操作将所选书籍添加至区域'+this.templateObj.Name+'中，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/District/BindBook', {
							districtId: this.templateObj.DistrictKeyId,
							bookids: this.formateUnBindBookSelection(),
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getUnBindBookInfo();
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.saveSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkAddWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].BookId);
				}
				return result;
			},
			//删除
			deleteBook() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将从区域'+this.templateObj.Name+'中删除所选图书，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/District/UnBindBook', {
							districtId: this.templateObj.DistrictKeyId,
							bookids: this.formateSelection(),
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.deleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},


			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				var param = {
					districtId: this.templateObj.DistrictKeyId,
					barcode: this.searchBookType === 2 ? this.searchBookModel : '',
					tag: this.searchBookType === 3 ? this.searchBookModel : '',
					keyword: this.searchBookType === 1 ? this.searchBookModel : '',
					index: this.currentPage,
					pagesize: this.pageSize,
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this, '/Api/District/BindedBook', param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.formatData(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.flex-inline {
		display: flex;
		justify-content: space-between;
		padding-bottom: 2px;
		.query {
			display: flex;
		}
	}
	
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>